<template>
  <div class="account-setting">
    <div class="account-setting-title">账户</div>
    <ul>
      <li>980582552@qq.com <span class="delete-text">删除</span></li>
    </ul>
    <div class="account-setting-title">邮件同步日</div>
    <a-radio-group v-model:value="formData.sync" :options="syncOptions" />
    <div class="account-setting-title">邮件同步频率</div>
    <a-radio-group v-model:value="formData.rate" :options="rateOptions" />
    <div class="account-setting-title">加密算法</div>
    <a-radio-group v-model:value="formData.type" :options="typeOptions" />
    <div>
      <a-button type="primary">保存</a-button>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";

const syncOptions = [
  { value: 1, label: '一个月' },
  { value: 2, label: '六个月' },
  { value: 3, label: '一年' },
  { value: 4, label: '无限制' },
]
const rateOptions = [
  { value: 1, label: '实时' },
  { value: 2, label: '10分钟' },
  { value: 3, label: '一小时' },
  { value: 4, label: '手动' },
]
const typeOptions = [
  { value: 1, label: 'RSA' },
  { value: 2, label: 'SM2' },
]
const formData = reactive({
  sync: '',
  rate: '',
  type: ''
})
</script>

<style lang="less" scoped>
.account-setting{
  .account-setting-title{
    font-size: 16px;
    padding-bottom: 8px;
    padding-top: 16px;
    font-weight: 600;
    &:first-child{
      padding-top: 0;
    }
  }
  :deep(.ant-radio-wrapper) {
    width: 100px;
  }
  .ant-btn{
    width: 80px;
    margin-top: 24px;
  }
}
</style>